<template>
  <cube-page type="button-view" title="业务员沟通" :rightBtn="false">
    <div slot="content">
      <div class="zform">
        <div class="zrow">
          <div class="zlabel">主题名称：</div>
          <div class="zdes">
            <input class="zinput" type="text" v-model="zform.name" :maxlength="100" :focus="triggerFocus_temp" placeholder="请输入主题名称" />
          </div>
        </div>
        <div class="zrow">
          <div class="zlabel">发布人：</div>
          <div class="zdes">
            <input class="zinput" type="text" v-model="zform.pubName" :maxlength="100" placeholder="请输入发布人名称" />
          </div>
        </div>
        <div class="zrow">
          <div class="zlabel">发布时间</div>
          <div class="zdes">
            <div class="zdatepicker" @click="showDatePicker">
              {{zform.sdate}}
              <i class="cubeic-wrong" v-show="zform.sdate" @click.stop.prevnet="zform.sdate=''"></i>
            </div>
          </div>
        </div>
        <div class="zrow">
          <div class="zlabel">完成时间</div>
          <div class="zdes">
            <div class="zdatepicker" @click="showDatePickerS">
              {{zform.donedate}}
              <i class="cubeic-wrong" v-show="zform.donedate" @click.stop.prevnet="zform.donedate=''"></i>
            </div>
          </div>
        </div>
        <div class="zrow">
          <div class="zlabel">讨论类型：</div>
          <div class="zdes">
            <cube-select class="zselect" v-model="zform.type" :options="typeList" placeholder="请选择讨论类型">
            </cube-select>
          </div>
        </div>
        <div class="zrow">
          <div class="zlabel">处理状态：</div>
          <div class="zdes">
            <cube-select class="zselect" v-model="zform.status" :options="statusList" placeholder="请选择处理状态">
            </cube-select>
          </div>
        </div>
        <div class="zrow">
          <div class="zlabel">级别：</div>
          <div class="zdes">
            <cube-select class="zselect" v-model="zform.level" :options="levelList" placeholder="请选择级别">
            </cube-select>
          </div>
        </div>
        <div class="zrow">
          <div class="zlabel">参与人：</div>
          <div class="zdes">
            <cube-button class="zbtn" @click="choseMember">选择</cube-button>
          </div>
        </div>
        <div class="zrow ztextareaWrap">
          <div class="zdes">
            <cube-textarea class="ztextarea" v-model="zform.memberList" placeholder="请输入参与人" :readonly="true" :maxlength="500" :autoExpand="true" @focus="choseMember"></cube-textarea>
          </div>
        </div>
        <div class="zrow ztextareaWrap">
          <div class="zlabel">详细内容：</div>
        </div>
        <div class="zrow ztextareaWrap">
          <div class="zdes">
            <cube-textarea class="ztextarea" v-model="zform.detail" placeholder="请输入详细内容" :maxlength="500" :autoExpand="true"></cube-textarea>
          </div>
        </div>
        <div class="zrow zcardBtns">
          <cube-button class="zbtn" @click="zfavorites()">取消</cube-button>
          <cube-button :primary="true" class="zbtn zuiReplayBtn" @click="showZuiPop()">发布</cube-button>
        </div>
      </div>

      <cube-view></cube-view>
    </div>
  </cube-page>
</template>

<script>
import {
  mapState,
  mapGetters,
  mapMutations,
  mapActions
} from 'vuex'

import BusFactory from 'vue-happy-bus';
import CubePage from '@/components/cube-page'
import CubeView from '@/components/cube-view'
import Drawer from '@/components/drawer'
import {zCommunicateAdd, zCommunicateMember} from '@/util/api';

export default {
  name: 'CommunicateAdd',
  components: {
    CubeView,
    CubePage,
    Drawer
  },
  computed: {
    ...mapState(['loginUserInfo']),
  },
  data () {
    return {
      bus: BusFactory(this),
      showLoading: true,
      datePicker: null,
      datePickerS: null,
      typeList: [{value: '1', text: '会议通知'}, {value: '2', text: '工作汇报'}, {value: '3', text: '联络单'}],
      statusList: [{value: '1', text: '未签收'}, {value: '2', text: '签收'}, {value: '3', text: '开始'}, {value: '4', text: '进行中'}, {value: '5', text: '已完成'}],
      levelList: [{value: '1', text: '一般'}, {value: '2', text: '紧急'}, {value: '3', text: '非常紧急'}],
      triggerFocus_temp: false,
      zform: {
        name: '',
        pubName: '',
        sdate: '',
        donedate: '',
        type: '1',
        status: '1',
        level: '1',
        members: '',
        memberList: '',
        detail: ''
      },
      tree: []
    }
  },
  created () {

  },
  mounted() {
    this.bus.$on('chooseMember', ({arr, arrName}) => {
      this.zform.members = arr;
      this.zform.memberList = arrName.join("，");
    })

    this.fetchMember();
  },
  watch: {

  },
  methods: {
    ...mapMutations(['setW_shortageData']),
    async fetchMember () {
      const zuiCubeLoading = this.$createToast({time: 0,txt: '正在加载中...'});
      zuiCubeLoading.show();
      let tbl_param = {

      }
      let res = await zCommunicateMember(tbl_param);
      res = this.zutil.formatAxiosData(res);
      zuiCubeLoading.hide();
      if(res.code == '0000'){
        this.tree = [{"id": 1, "name": "上饶人民医院", "children": [{"id": 1, "name": "内科", "children": [{"id": 5, "name": "内科组1"}, {"id": 6, "name": "内科组2", "children": [{"id": 51, "name": "内科组11"}, {"id": 61, "name": "内科组22"} ] } ] }, {"id": 2, "name": "外科", "children": [{"id": 3, "name": "外科组1"}, {"id": 4, "name": "外科组2"} ] } ] } ];
      }else{
        this.$createToast({type: 'error', time: 2000, txt: res.message || "获取业务员树失败！"}).show();
      }
    },
    showDatePicker () {
      if (!this.datePicker) {
        this.datePicker = this.$createDatePicker({
          min: new Date(1949, 0, 1),
          max: new Date(),
          value: new Date(),
          onSelect: (date, selectedVal, selectedText) => {
            this.zform.sdate = this.moment(date).format('YYYY-MM-DD');
          }
        })
      }
      this.datePicker.show();
    },
    showDatePickerS () {
      if (!this.datePickerS) {
        this.datePickerS = this.$createDatePicker({
          min: new Date(),
          max: new Date(2100, 11, 31),
          value: new Date(),
          onSelect: (date, selectedVal, selectedText) => {
            this.zform.donedate = this.moment(date).format('YYYY-MM-DD');
          }
        })
      }
      this.datePickerS.show();
    },
    choseMember () {
      this.zutil.lStorage.setParam('lst_chooseMember', JSON.stringify(this.zform));
      this.zutil.lStorage.setParam('lst_tree', JSON.stringify(this.tree));
      this.$router.push("/communicate/add/member");
    },
    zfavorites () {
      this.$router.go(-1);
    },
    async showZuiPop () {
      if(!this.zform.name){
        this.$createToast({type: 'warn', time: 1000, txt: "请输入主题名称"}).show();
        return false;
      }
      if(!this.zform.pubName){
        this.$createToast({type: 'warn', time: 1000, txt: "请输入发布人名称"}).show();
        return false;
      }
      if(!this.zform.sdate){
        this.$createToast({type: 'warn', time: 1000, txt: "请选择发布时间"}).show();
        return false;
      }
      if(!this.zform.donedate){
        this.$createToast({type: 'warn', time: 1000, txt: "请选择完成时间"}).show();
        return false;
      }
      if(!this.zform.type){
        this.$createToast({type: 'warn', time: 1000, txt: "请选择讨论类型"}).show();
        return false;
      }
      if(!this.zform.status){
        this.$createToast({type: 'warn', time: 1000, txt: "请选择处理状态"}).show();
        return false;
      }
      if(!this.zform.level){
        this.$createToast({type: 'warn', time: 1000, txt: "请选择级别"}).show();
        return false;
      }
      if(!this.zform.memberList || !this.zform.memberList.length){
        this.$createToast({type: 'warn', time: 1000, txt: "请选择业务员"}).show();
        return false;
      }
      if(!this.zform.detail){
        this.$createToast({type: 'warn', time: 1000, txt: "请输入详细内容"}).show();
        return false;
      }

      const zuiCubeLoading = this.$createToast({time: 0,txt: '正在加载中...'});
      zuiCubeLoading.show();
      let tbl_param = {

      }
      console.log(this.zform)
      this.zutil.deepClone(tbl_param, this.zform);
      let res = await zCommunicateAdd(tbl_param);
      res = this.zutil.formatAxiosData(res);
      zuiCubeLoading.hide();
      if(res.code == '0000'){
        this.$createToast({type: 'correct', time: 2000, txt: res.message || "新建沟通成功"}).show();
        this.bus.$emit('refreshCommuni', true);
        this.zfavorites();
      }else{
        this.$createToast({type: 'error', time: 2000, txt: res.message || "新建沟通失败！"}).show();
      }
    }
  }
}
</script>

<style scoped lang="scss">
@mixin zuiDrawerInputS {
  display: inline-block;
  width: 100%;
  border: 1px solid #F6F6F6;
  background: #F6F6F6;
  border-radius: 30px;
  height: 32px;
  line-height: 32px;
  text-align: center;
  padding: 0;
  overflow: hidden;
}

.zform {
  background: #fff;
  padding: 20px 10px;
  .zrow {
    display: flex;
    height: 40px;
    line-height: 40px;
    align-items: center;
    margin-top: 10px;
    &:first-child {
      margin-top: 0;
    }
    .zlabel {
      width: 70px;
      color: #737275;
    }
    .zdes {
      flex: 1;
      word-break:keep-all;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
      color: #000;

      .zinput {
        @include zuiDrawerInputS;
        &:focus {
          outline: none;
        }
        &.cube-input_active:after {
          border: 0;
          outline: none;
        }

        /deep/ {
          .cube-input-field {
            padding: 0 10px;
            color: #000;
            text-align: center;
            font-size: 14px;

            &:focus {
              border: none;
              outline: none;
            }
          }
        }
      }
      .zselect {
        @include zuiDrawerInputS;

        &.cube-select_active:after {
          border: 0;
          outline: none;
        }
        &:after {
          border: 0;
          outline: none;
        }
      }
      .zdatepicker {
        @include zuiDrawerInputS;
        font-size: 14px;
        position: relative;

        .cubeic-wrong {
          position: absolute;
          right: 0;
          top: 0;
          height: 32px;
          line-height: 32px;
          width: 32px;
          display: block;
          color: #999;
        }
      }
      .zbtn {
        width: 80px;
        height: 30px;
        padding: 0;
        display: inline-block;
        font-size: 12px;
      }
    }
    &.ztextareaWrap {
      height: auto;
      align-items: start;

      .ztextarea {
        height: 80px;
        border: 1px solid #eee;
      }
    }

    &.zcardBtns {
      padding: 0;
      .zbtn {
        padding: 0;
        height: 40px;
        line-height: 40px;
        border-radius: 0;
        font-size: 14px;

        &:first-child {
          border-bottom-left-radius: 6px;
        }
        &:last-child {
          border-bottom-right-radius: 6px;
        }
      }
    }
  }
}

</style>
